<template>
    <DialogVue :data="dialog" @close="onAuditCancel">
        <template #content>
            <div class="dialog-box">
                <div class="dialog-row">
                    <div class="row-title">公司名称：</div>
                    <div class="row-info">{{ dialog.company }}</div>
                </div>
                <div class="dialog-row">
                    <div class="row-title">产品类型：</div>
                    <div class="row-info">
                        <el-radio-group v-model="dialog.type" @change="onSelectType">
                            <el-radio-button v-for="item in TABLE_TYPE" :key="item" :label="item" />
                        </el-radio-group>
                    </div>
                </div>
                <div class="dialog-row">
                    <div class="row-title">试用次数：</div>
                    <div class="row-info">
                        <template v-if="dialog.type == TABLE_TYPE[0]">
                            <el-input
                                type="number"
                                v-model="dialog.one"
                                style="width: 140px; margin-right: 8px"
                            ></el-input>
                        </template>
                        <template v-else-if="dialog.type == TABLE_TYPE[1]">
                            <el-input
                                type="number"
                                v-model="dialog.two"
                                style="width: 140px; margin-right: 8px"
                            ></el-input>
                        </template>
                        <template v-else>
                            <el-input
                                type="number"
                                v-model="dialog.three"
                                style="width: 140px; margin-right: 8px"
                            ></el-input>
                        </template>
                        次
                    </div>
                </div>
                <div class="dialog-row">
                    <div class="row-title">备注：</div>
                    <div class="row-info" style="width: 360px">
                        <el-input v-model="dialog.remark" :rows="4" type="textarea" placeholder="" />
                    </div>
                </div>
                <div class="dialog-btn">
                    <el-button type="primary" @click="onAuditConfirm">确定</el-button>
                    <el-button @click="onAuditCancel">取消</el-button>
                </div>
            </div>
        </template>
    </DialogVue>
</template>
<script setup lang="ts">
import DialogVue from '@/components/baseDialog/Index.vue'
import { ElMessage } from 'element-plus'
import { reactive, watchEffect } from 'vue'
import { setCompanyTrialCount } from '@/apis/company/trial'

const TABLE_TYPE = reactive(['出险车况查询', '维保车况查询', '新能源车况查询'])

//接收父组件传递的参数
const props = defineProps(['data'])

//注册父组件的回调
const emits = defineEmits(['hidden'])
//弹窗数据
const dialog = reactive({
    visible: true, //显示隐藏
    title: '增加免费试用次数', //标题
    width: '600px', //弹窗宽度
    one: '0', //免费试用次数 出险
    two: '0', //免费试用次数 维保车况
    three: '0', //免费试用次数 新能源车况
    company: '', //公司名
    address: '', //地址
    companyId: '',
    type: '出险车况查询',
    remark: ''
})

/**
 * 由于props中的数据是Readonly，不能直接使用，所以用watchEffect监听props数据变化
 */
watchEffect(() => {
    if (props.data) {
        dialog.visible = props.data.visible

        if (props.data.visible) {
            dialog.company = props.data.companyName
            dialog.companyId = props.data.companyId
            dialog.remark = props.data.remark
        }
    }

    console.log('config', props.data)
})
const onSelectType = (res: any) => {
    console.log(res)
    dialog.type = res
}
//关闭弹窗方法，并且传递弹窗隐藏
const onAuditCancel = () => {
    emits('hidden', true)
    //重置表单内容
    dialog.one = '0'
    dialog.two = '0'
    dialog.three = '0'

    console.log('hidden', dialog)
}

const onAuditConfirm = () => {
    const obj = {
        1: Number(dialog.one),
        2: Number(dialog.two),
        3: Number(dialog.three)
    }
    setCompanyTrialCount(dialog.companyId, obj, dialog.remark).then(res => {
        if (res.data.value === 200) {
            ElMessage.success('添加免费试用次数成功！')
            onAuditCancel()
        }
    })
}
</script>
<style scoped lang="scss">
.dialog-row {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 10px;
    .row-title {
        width: 30%;
        box-sizing: border-box;
        padding-right: 8px;
        text-align: right;
    }
    .row-info {
        width: 70%;
        display: flex;
        align-items: center;
    }
}
.dialog-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0 16px 0;
}
</style>
